﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div align="center">
        <h1>FollowMe demo</h1>
    </div>

    <div style="float:left; width:30%; min-width:200px;" align="center">
        <form id="userSignup">
            <input type="text" name="Email" id="UserName" placeholder="Name" />
            <input type="password" name="Password" id="Password" placeholder="Password" />
            <input type="text" name="firstname" placeholder="First Name" />
            <input type="text" name="lastname" placeholder="Last Name" />
        </form>
        <input type="submit" id="signup" value="Sign up" />
        <input type="submit" id="signin" value="Sign in" />

        <p></p>

        <form id="getuserform">
            <input type="text" name="getuser" id="userID" placeholder="MemberID" />
        </form>
        <button id="getuser">Get Users Info</button>

        <p></p>

        <form id="search">
            <input type="text" name="memberid" placeholder="memberid" />
            <input type="text" name="searchfriend" id="searchfriend" placeholder="search" />
        </form>
        <button id="findFriends">Search For Friends</button>

        <p></p>

        <form id="formaddfriend">
            <input type="text" name="friend1" placeholder="memberIDfrom" />
            <input type="text" name="friend2" placeholder="memberIDother" />
        </form>

        <button id="addFriend">Add Friend</button>

        <button id="deletefriend">Delete Friend</button>

        <p></p>

        <!--send message-->
        <form id="sendmessage">
            <input type="text" name="friend1" id="messfriend1" placeholder="memberIDfrom" />
            <input type="text" name="friend2" id="messfriend2" placeholder="memberIDother" />
            <input type="text" name="content" id="messContent" placeholder="Content" />
        </form>

        <button id="btnsendmessage">Send Message</button>

        <p></p>

        <!--mark message read-->
        <form id="markread">
            <input type="text" name="messageid" id="messtoMark" placeholder="MessageId" />
        </form>

        <button id="btnmarkread">Mark Message Read</button>

        <p></p>

        <!--get sent messages-->
        <form id="getmess">
            <input type="text" name="memberid" placeholder="MemberId" />
        </form>

        <button id="btngetsent">Get Sent Messages</button>

        <button id="btngetreceived">Get Received Messages</button>

        <button id="btngetunread">Get Unread Messages</button>





    </div>

    <div align="left">
        <pre id="serverResponse">Server Response:</pre>
    </div>

    <script src="Scripts/jquery-2.1.0.js"></script>
    <script  type="text/javascript">
        $(function () {
            var baseUrl = "http://localhost:65365/";
            //var baseUrl = "http://followme.csproject.org:8080/";
            

            function showError(jqXHR) {
                alert(jqXHR.status + ': ' + jqXHR.statusText + "\n json: \n" + JSON.stringify( jqXHR.responseJSON));
            };

            var getuser = function () {
                var data = {
                    memberid: $("#getuserform").find('input[name="getuser"]').val(),
                };

                //get all user's info
                
                $.ajax({
                    type: 'GET',
                    url: baseUrl + "api/Member/AllInfo",
                    contentType: 'application/json; charset=utf-8',
                    headers: getHeaders(),
                    data: data
                }).done(function (data) {
                    
                }).fail(showError)
                    .always(showserverResponse);
                 return false;
                };

                var getHeaders = function () {
                    if (token){
                        return { "Authorization": "Bearer " + token };
                    }
                };

                var showserverResponse = function (obj) {
                    $("#serverResponse").text("Server Response: \n" + JSON.stringify(obj, null, 3));
                };

                var register = function () {
                    var registrationUrl = baseUrl + "api/Account/Register";
                    var registrationData =  $("#userSignup").serialize();
                    $.post(registrationUrl, registrationData).always(showserverResponse);
                    return false;
                };

                var token = "";

                var saveAccessToken = function (data) {
                    token = data.access_token;
                };

                var signin = function () {
                    var tokenUrl = baseUrl + "Token";

                    var data = {
                        grant_type: 'password',
                        username: $("#userSignup").find('input[name="Email"]').val(),
                        password: $("#userSignup").find('input[name="Password"]').val()
                    };

                    
                    $.ajax({
                        type: 'POST',
                        url: tokenUrl,
                        contentType: 'application/json; charset=utf-8',
                        data: data
                    }).done(function (data) {
                        
                    }).fail(showError)
                        .success(saveAccessToken)
                        .always(showserverResponse);

                    return false;
                };

                var addFriend = function () {
                                    //Make friends
                    var data = {
                        memberid: $("#formaddfriend").find('input[name="friend1"]').val(),
                        NewFriend: $("#formaddfriend").find('input[name="friend2"]').val()
                    };

                    $.ajax({
                        type: 'POST',
                        url: baseUrl + "api/Friend/AddFriend",
                        contentType: 'application/json; charset=utf-8',
                        data: JSON.stringify(data)
                    }).done(function (data) {
                        
                    }).fail(showError)
                       .always(showserverResponse);
                };



                var findFriends = function () {
                    var data = {
                        memberid: $("#search").find('input[name="memberid"]').val(),
                        search: $("#search").find('input[name="searchfriend"]').val()
                    };

                    
                    $.ajax({
                        type: 'GET',
                        headers: getHeaders(),
                        url: baseUrl + "api/Friend/Search",
                        contentType: 'application/json; charset=utf-8',
                        data: data
                    }).done(function (data) {
                        
                    }).fail(showError)
                        .always(showserverResponse);
                };


                var deleteFriend = function () {
                    //Make friends
                    $.param({"memberid" : $("#formaddfriend").find('input[name="friend1"]').val(), "ExFriend" : $("#formaddfriend").find('input[name="friend2"]').val()
                    })

                    $.ajax({
                        type: 'DELETE',
                        url: baseUrl + "api/Friend/RemoveFriend" + "?" + $.param({"memberid" : $("#formaddfriend").find('input[name="friend1"]').val(), "ExFriend" : $("#formaddfriend").find('input[name="friend2"]').val()
                    }),
                        contentType: 'application/json; charset=utf-8',
                    }).done(function (data) {
                        
                    }).fail(showError)
                       .always(showserverResponse);
                };


                var sendMessage = function () {
                    //Make message
                    var data = {
                        memberid: $("#sendmessage").find('input[name="friend1"]').val(),
                        membertoid: $("#sendmessage").find('input[name="friend2"]').val(),
                        content: $("#sendmessage").find('input[name="content"]').val()
                    };

                    $.ajax({
                        type: 'POST',
                        url: baseUrl + "api/Message/Send",
                        headers: getHeaders(),
                        contentType: 'application/json; charset=utf-8',
                        data: JSON.stringify(data)
                    }).done(function (data) {
                        
                    }).fail(showError)
                       .always(showserverResponse);
                };

                var markRead = function () {
                    //Make message
                    var data = {
                       messageid: $("#markread").find('input[name="messageid"]').val()
                    };

                    $.ajax({
                        type: 'PUT',
                        url: baseUrl + "api/Message/MarkRead",
                        headers: getHeaders(),
                        contentType: 'application/json; charset=utf-8',
                        data: JSON.stringify(data)
                    }).done(function (data) {
                        
                    }).fail(showError)
                       .always(showserverResponse);
                };

                var getreceived = function () {
                    var data = {
                        memberid: $("#getmess").find('input[name="memberid"]').val()
                    };

                    
                    $.ajax({
                        type: 'GET',
                        headers: getHeaders(),
                        url: baseUrl + "api/Message/GetReceived",
                        contentType: 'application/json; charset=utf-8',
                        data: data
                    }).done(function (data) {
                        
                    }).fail(showError)
                        .always(showserverResponse);
                };

                var getunread = function () {
                    var data = {
                        memberid: $("#getmess").find('input[name="memberid"]').val()
                    };

                    
                    $.ajax({
                        type: 'GET',
                        headers: getHeaders(),
                        url: baseUrl + "api/Message/GetUnread",
                        contentType: 'application/json; charset=utf-8',
                        data: data
                    }).done(function (data) {
                        
                    }).fail(showError)
                        .always(showserverResponse);
                };

                var getsent = function () {
                    var data = {
                        memberid: $("#getmess").find('input[name="memberid"]').val()
                    };

                    
                    $.ajax({
                        type: 'GET',
                        headers: getHeaders(),
                        url: baseUrl + "api/Message/GetSent",
                        contentType: 'application/json; charset=utf-8',
                        data: data
                    }).done(function (data) {
                        
                    }).fail(showError)
                        .always(showserverResponse);
                };


                $("#signin").click(signin);
                $("#signup").click(register);
                $("#getuser").click(getuser);
                $("#findFriends").click(findFriends);
                $("#addFriend").click(addFriend);
                $("#deletefriend").click(deleteFriend);
                $('#btnsendmessage').click(sendMessage);
                $('#btnmarkread').click(markRead);
                $('#btngetreceived').click(getreceived);
                $('#btngetsent').click(getsent);
                $('#btngetunread').click(getunread);
            });
    </script>

</body>
</html>
